import Vue from 'vue'
import VueRouter from 'vue-router'
//动态导入组件，这样导入的好处是，单独组件的CSS JS资源会分开编译成多个文件，避免一个文件过大
const Login = () => import('components/Login.vue')
const Home = () => import('components/Home.vue')
const Welcome = () => import('components/Welcome.vue')
const Users = () => import('components/user/Users.vue')
const Rights = () => import('components/power/Rights.vue')
const Roles = () => import('components/power/Roles.vue')
const Cate = () => import('components/goods/Cate.vue')
const Params = () => import('components/goods/Params.vue')
const GoodsList = () => import('components/goods/List.vue')
const AddGoods = () => import('components/goods/Add.vue')
const Order = () => import('components/order/Order.vue')
const Report = () => import('components/report/Report.vue')

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    component: Home,
    redirect: '/welcome', //重定向
    //children 子路由
    children: [
      {path: '/welcome', component: Welcome},
      {path: '/users', component: Users},
      {path: '/rights', component: Rights},
      {path: '/roles', component: Roles},
      {path: '/categories', component: Cate},
      {path: '/params', component: Params},
      {path: '/goods', component: GoodsList},
      {path: '/goods/add', component: AddGoods},
      {path: '/orders', component: Order},
      {path: '/reports', component: Report}
    ]
  }
]

const router = new VueRouter({
  routes,
  mode: 'history'//路由模式 history模式。浏览器地址没有#符号 hash模式。浏览器有#符号
})

//挂载路由导航守卫
router.beforeEach((to, from, next) => {
  //to将要访问的路径
  // from 代表从哪个路径跳转而来
  //next是一个函数 表示放行
  //next() 放行  next('/login') 强制跳转
  if (to.path === '/login') {
    return next();
  }
  //获取token
  const tokenStr = window.sessionStorage.getItem('token');
  //当token不存在
  if (!tokenStr) {
    return next('/login');
  }
  else {
    next()
  }
})

export default router
